<script setup>
import { ref, reactive, onMounted } from 'vue'
import { listPackages, createPackage, updatePackage, deletePackage, listPackageItems, addPackageItem, removePackageItem } from '../../api/admin'
import { listIndicators } from '../../api/admin'

const loading = ref(false)
const list = ref([])
const total = ref(0)
const query = reactive({ name: '', page: 1, size: 10 })
const dialog = reactive({ visible: false, title: '新建套餐', form: { packageId: null, packageName: '', totalPrice: 0, description: '' } })
const itemsDialog = reactive({ visible: false, package: null, items: [], allIndicators: [], indicatorId: '' })
const indicatorNameMap = ref({})

const fetchList = async () => {
  loading.value = true
  try {
    const data = await listPackages({ name: query.name || undefined, page: query.page, size: query.size })
    list.value = data.list || []
    total.value = data.total || 0
  } finally { loading.value = false }
}

const openCreate = () => {
  dialog.title = '新建套餐'
  dialog.form = { packageId: null, packageName: '', totalPrice: 0, description: '' }
  dialog.visible = true
}

const openEdit = (row) => {
  dialog.title = '编辑套餐'
  dialog.form = { packageId: row.packageId, packageName: row.packageName, totalPrice: row.totalPrice, description: row.description }
  dialog.visible = true
}

const savePackage = async () => {
  if (!dialog.form.packageName) return
  if (dialog.form.packageId) {
    await updatePackage(dialog.form.packageId, { packageName: dialog.form.packageName, totalPrice: dialog.form.totalPrice, description: dialog.form.description })
  } else {
    await createPackage({ packageName: dialog.form.packageName, totalPrice: dialog.form.totalPrice, description: dialog.form.description })
  }
  dialog.visible = false
  fetchList()
}

const remove = async (row) => {
  await deletePackage(row.packageId)
  fetchList()
}

const openItems = async (row) => {
  itemsDialog.package = row
  itemsDialog.visible = true
  const data = await listPackageItems(row.packageId)
  itemsDialog.items = data || []
  const all = await listIndicators({ page: 1, size: 100 })
  itemsDialog.allIndicators = all.list || []
  indicatorNameMap.value = Object.fromEntries((itemsDialog.allIndicators || []).map(ind => [ind.indicatorId, ind.indicatorName]))
}

const addItem = async () => {
  if (!itemsDialog.indicatorId || !itemsDialog.package) return
  await addPackageItem(itemsDialog.package.packageId, itemsDialog.indicatorId)
  const data = await listPackageItems(itemsDialog.package.packageId)
  itemsDialog.items = data || []
  itemsDialog.indicatorId = ''
}

const removeItem = async (item) => {
  await removePackageItem(item.id)
  const data = await listPackageItems(itemsDialog.package.packageId)
  itemsDialog.items = data || []
}

onMounted(fetchList)
</script>

<template>
  <el-card>
    <div class="toolbar">
      <h3>体检套餐管理</h3>
      <div>
        <el-input v-model="query.name" placeholder="套餐名称" style="width:200px" />
        <el-button type="primary" @click="query.page=1;fetchList()" class="ml-1">查询</el-button>
        <el-button type="success" @click="openCreate" class="ml-1">新建套餐</el-button>
      </div>
    </div>
    <el-table :data="list" v-loading="loading">
      <el-table-column prop="packageId" label="ID" width="80" />
      <el-table-column prop="packageName" label="套餐名称" />
      <el-table-column prop="totalPrice" label="价格" width="120" />
      <el-table-column prop="description" label="描述" />
      <el-table-column label="操作" width="220">
        <template #default="{ row }">
          <el-button size="small" @click="openItems(row)">管理项目</el-button>
          <el-button size="small" type="primary" @click="openEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="mt-2" background layout="total, prev, pager, next" :total="total" :page-size="query.size" :current-page="query.page" @current-change="(p)=>{query.page=p;fetchList()}" />
  </el-card>

  <el-dialog v-model="dialog.visible" :title="dialog.title" width="480px">
    <el-form label-width="90px">
      <el-form-item label="套餐名称"><el-input v-model="dialog.form.packageName" /></el-form-item>
      <el-form-item label="价格"><el-input v-model.number="dialog.form.totalPrice" type="number" /></el-form-item>
      <el-form-item label="描述"><el-input v-model="dialog.form.description" type="textarea" /></el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialog.visible=false">取消</el-button>
      <el-button type="primary" @click="savePackage">保存</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="itemsDialog.visible" title="套餐项目管理" width="640px">
    <div class="mb-2">
      <el-select v-model="itemsDialog.indicatorId" placeholder="选择检查指标" style="width: 320px">
        <el-option v-for="ind in itemsDialog.allIndicators" :key="ind.indicatorId" :label="ind.indicatorName" :value="ind.indicatorId" />
      </el-select>
      <el-button type="primary" class="ml-1" @click="addItem">添加</el-button>
    </div>
    <el-table :data="itemsDialog.items">
      <el-table-column prop="indicatorId" label="指标ID" width="100" />
      <el-table-column label="指标名称">
        <template #default="{ row }">
          <span>{{ indicatorNameMap[row.indicatorId] || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button type="danger" size="small" @click="removeItem(row)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<style scoped>
.toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ml-1{ margin-left:8px; }
.mt-2{ margin-top:12px; }
.mb-2{ margin-bottom:12px; }
</style>